import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject("todoStore")
@observer
class TodoList extends Component {
  render() {
    let {
      todos,
      filterTodos,
      deleteTodo,
      changeCompleted,
      allCompleted,
      changeAllCompleted,
    } = this.props.todoStore;
    return (
      <section
        className="main"
        style={{ display: todos.length ? "block" : "none" }}
      >
        <input
          className="toggle-all"
          type="checkbox"
          checked={allCompleted}
          onChange={(e) => changeAllCompleted(e.target.checked)}
        />
        <div>{allCompleted}</div>
        <ul className="todo-list">
          {filterTodos.map((todo, index) => (
            <li className={todo.isCompleted ? "completed" : ""} key={index}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={todo.isCompleted}
                  onChange={(e) => changeCompleted(index, e.target.checked)}
                />
                <label>{todo.taskName + " | " + todo.isCompleted}</label>
                <button
                  className="destroy"
                  onClick={() => deleteTodo(index)}
                ></button>
              </div>
              <input className="edit" />
            </li>
          ))}
        </ul>
      </section>
    );
  }
}

export default TodoList;
